<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="widthFix"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="系统任务">
				<view slot="center" class="navTitle">
					系统任务
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="tbs">
							<view class="i" :class="type==0?'cur':''" @tap="toggleType(0)">
								<view class="it">
									进行中
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="i" :class="type==1?'cur':''" @tap="toggleType(1)">
								<view class="it">
									已完成
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30"
				@scrolltolower="loadMore">
				<view class="pd30" v-if="list && list.length>0">
					<view class="workList">
						<view class="workBox" v-for="(k,kindex) in list" :key="kindex">
							<view class="date" style="display: flex;justify-content: space-between;">
								{{k.publishTime}}
								<span>{{k.studentName}}</span>
							</view>
							<view class="wkitem" v-for="(l,lindex) in k.planList" :key="lindex">
								<view class="tit" :class="{'pink':!l.isComplete,'s2':lindex==0}">
									<view class="titin">
										<view class="tl">
											<view class="or">{{(lindex+1)}}</view>
											<view class="t">
												{{l.planName}}
											</view>
										</view>
										<view class="tr">
											<view v-if="l.tips">
												<navigator url="/subpage/appointment/list" open-type="navigate"
													class="btn navigator">
													去预约
												</navigator>
											</view>
											<text v-else>
												{{l.completed?'已完成':'未完成'}}
											</text>
										</view>
									</view>
								</view>
								<template v-for="(m,mindex) in l.tasksList">
									<view class="rpt">

										<view class="subt" :class="m.completed?'':'s2'">
											<view class="dot"></view>
											<view class="tc">
												<view class="t">{{m.bizName}}</view>
												<view class="tr">
													
													<view v-if="l.plan==3">
														<view class="addBtn"  @tap="viewDetailAdd(l,m)">
															<view class="ico">
																<image src="@/static/images/icon-add.svg" mode="aspectFit"></image>
															</view>
															<text>添加</text>
														</view>
													</view>
													<view v-else>
														<view v-if="!m.completed" class="btn on" @tap="viewDetail(l,m)">

															<span
																v-if="l.plan==4 || l.plan==5 || l.plan==8 || l.plan==9">查看</span>
															<span v-else>去完成</span>
														</view>

														<view class="btn"
															v-if="m.completed"
															@tap="viewDetail(l,m)">
															查看
														</view>
													</view>
												</view>
											</view>


										</view>
										
										<view class="ul" v-if="l.plan==3">
											<view class="li" v-for="(fr,frIndex) in m.formList" :key="frIndex">
												<view class="idate">
													{{fr.time}}
												</view>
												<view class="it">
													访谈记录表
												</view>
												<view class="ir">
													<view class="btn" @tap="viewDetailAdd(l,m,fr)">
														查看
													</view>
												</view>
											</view>
										</view>

										<view class="ul" v-if="l.plan==5">
											<view class="li">
												<view class="idate" style="width: auto;">
													会诊时间
												</view>
												<view class="ir">
													{{m.startTime}} ~ {{m.endTime}}
												</view>
											</view>
											<view class="li">
												<view class="idate">
													会诊地点
												</view>
												<view class="ir">
													{{m.address}}
												</view>
											</view>
										</view>


									</view>
								</template>
								<view class="wtips" v-if="l.tips">
									<rich-text :nodes="l.tips"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx"
						:status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>

		<view class="flex0">
			<TabBar :active="2" :type="utype"></TabBar>
		</view>
		<!-- <u-action-sheet @close="showActionSheet=false" :closeOnClickOverlay="true" round="30rpx"
			:actions="actions[actionSheetIndex]" @select="handleAction" :show="showActionSheet"></u-action-sheet> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop: 0,
				scrollTop: 0,
				type: 0,
				list: [],
				pageSize: 10,
				total: 1,
				pageIndex: 1,
				isLoading: false
			}
		},
		methods: {

			toFinish(tasksId) {

				this.$api.tasksCompleted({
					tasksId
				}, res => {
					if (res.code == 200) {

						this.list = [];
						this.pageIndex = 1;
						this.getList();
					}
				})

			},
			viewDetailAdd(l, item,item1){
					if(item1 && item1.id){
						
						
							uni.navigateTo({
								url: `/subpage/teacher/homeVisits/detail?id=${item.bizId}&formId=${item1.id}`
							});
					}else{
						
						uni.navigateTo({
							url: `/subpage/teacher/homeVisits/homeVisits?id=${item.bizId}&taskId=${item.id}`
						});
					}
			},
			viewDetail(l, item) {
				if (l.plan == 1) {

					//单篇详情
					uni.navigateTo({
						url: `/subpage/article/detail?id=${item.bizId}&tasksId=${item.id}`
					})
				}else if (l.plan == 7) {

					//测评详情
					if (item.completed) {

						uni.navigateTo({
							url: `/subpage/report/report?id=${item.completionId}`
						});
					} else {
						uni.navigateTo({
							url: `/subpage/test/projectDetail?id=${item.bizId}&taskId=${item.id}`
						})
					}
				} else if (l.plan == 4 || l.plan == 5 || l.plan == 8 || l.plan == 9) {

					uni.navigateTo({
						url: `/subpage/notice/notice?id=${item.bizId}&taskId=${item.id}`
					})
				}
			},

			viewParentCommunicate(id) { //查看家长访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/homeVisits/detail?id=' + id
				});
			},
			viewtzDetail(id) { //通知详情
				uni.navigateTo({
					url: '/subpage/notice/notice?id=' + id
				})
			},
			viewzjDetail(id) { //查看转介信
				uni.navigateTo({
					url: '/subpage/teacher/letter/letter?id=' + id
				});
			},
			updateScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			toggleType(type) {
				var that = this;
				that.type = type;
				that.list = [];
				that.pageIndex = 1;
				that.scrollTop = that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList() {


				if (this.isLoading) {
					return;
				};
				this.isLoading = true;
				let post = {
					pageNo: this.pageIndex,
					methodType: 'get',
					completed: this.type ? true : false,
					pageSize: 20
				}

				this.$api.tasksList(post, res => {
					if (res.code == 200) {
						// this.total=res.data.total;
						let _list = res.data
						this.list = [...this.list, ..._list]
						// 判断所有数据是否请求完毕
						this.isLoading = false;
					}
				})
			},
			loadMore() {
				var that = this;
				if (that.list.length < that.total && !that.isLoading) {
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed: {

		},
		onShow() {
			this.list = [];
			this.pageIndex = 1;
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.workItem {
		margin-bottom: 30rpx;
		padding-bottom: 50rpx;
		border-bottom: 1rpx solid #f8f6f4;

		&:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
			border: none;
		}
	}

	.ihd {
		padding: 30rpx;
		border-radius: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;

		.date {
			line-height: 1;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f8f6f4;
			color: #65554d;
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}

		.bx {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bxt {
				flex: 1 1 auto;
				padding-right: 30rpx;
				font-size: 32rpx;
				color: #65554d;
			}

			.bxr {
				flex: 0 0 auto;

				.tag {
					padding: 0 12rpx;
					line-height: 40rpx;
					border-radius: 6rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.wtit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.tl {
			flex: 1 1 auto;
			overflow: hidden;
			font-size: 32rpx;
			color: #65554d;
		}

		.tr {
			flex: 0 0 auto;

			.btn {
				padding: 0 12rpx;
				line-height: 40rpx;
				border-radius: 40rpx;
				font-size: 24rpx;
				background: #df7f83;
				color: #fff;
			}
		}
	}

	.rwdx {
		padding: 26rpx 30rpx;
		text-align: center;
		margin: -13rpx -40rpx 30rpx;
		background: #ffebf2;
		color: #df6982;
		font-size: 24rpx;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			right: 90rpx;
			bottom: 100%;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-bottom: 6rpx solid #ffebf2;
		}
	}

	.workBox {
		.tit {
			padding: 15rpx 0;
			background: none;
			display: block;

			.titin {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 30rpx 30rpx 0;
				background: linear-gradient(90deg, #fff, #dbf3e5);
				border-radius: 0 20rpx 20rpx 0;

			}

			&.pink {
				.titin {
					background: linear-gradient(90deg, #fff, #ffdeea);
				}
			}

			&:before {
				content: "";
				position: absolute;
				left: 14rpx;
				width: 4rpx;
				bottom: calc(50% + 10rpx);
				top: 0;
				background: #e8e8e8;
				z-index: 1;
			}

			&:after {
				content: "";
				position: absolute;
				left: 14rpx;
				width: 4rpx;
				top: calc(50% + 10rpx);
				bottom: 0;
				background: #e8e8e8;
				z-index: 1;
			}

			&.s2 {
				&:before {
					display: none;
				}

				&:after {
					display: block;
				}
			}
		}
	}
</style>